<template>
  <div>
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="订单详情"
      fullscreen
      center
      @close="close"
    >
      <el-collapse-transition>
        <div>
          <div ref="wxaMallOrderDetail" class="content-container">
            <!-- 操作按钮 -->

            <div class="handle-btn-container flexREC no-print">
              <el-button
                type="text"
                icon="el-icon-printer"
                @click="putSealTicket(detailData.orderNo)"
              >打印小票
              </el-button>
              <el-button
                type="text"
                icon="el-icon-printer"
                @click="print"
              >订单打印
              </el-button>
              <el-button
                type="text"
                icon="el-icon-edit-outline"
                @click="openDialogRemark"
              >订单备注
              </el-button>
              <el-button
                v-if="buttonStatus"
                type="text"
                icon="el-icon-box"
                @click="openWriteOffOrder"
              >核销
              </el-button>
              <el-button
                v-if="buttonStatus"
                type="text"
                icon="el-icon-edit-outline"
                @click="openDialogAmend"
              >修改预约
              </el-button>
              <el-button
                v-if="refundStatus"
                style="color:#f56c6c"
                type="text"
                icon="el-icon-circle-close"
                @click="openDialogCancel"
              >主动退款
              </el-button>
            </div>

            <!-- 详情表格 -->
            <div class="order-info-container">
              <div class="cell-item">
                <div class="col col-3">
                  <div>订单编号</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.orderNo }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>下单时间</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.createTime }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>订单状态</div>
                </div>
                <div class="col col-5">
                  <div>
                    <el-tag
                      :type="TAG_MAP[detailData.status]"
                      size="small"
                    >{{ statusOptions[detailData.status] }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>支付单号</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.orderVo.paymentNo }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>支付时间</div>
                </div>
                <div class="col col-5">
                  <div>
                    <span>{{ detailData.orderVo.paymentTime }}</span>
                  </div>
                </div>
                <div class="col col-3">
                  <div>完成时间</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.useTime }}
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>下单顾客</div>
                </div>
                <div class="col col-5">
                  <div v-if="detailData.orderVo.memberName">
                    {{ detailData.orderVo.memberName }}<span v-if="detailData.downPhone">（{{ detailData.downPhone }}）</span>
                  </div>
                  <div v-else>
                    {{ detailData.downName }}<span v-if="detailData.downPhone">（{{ detailData.downPhone }}）</span>
                  </div>
                </div>
                <div class="col col-3">
                  <div>微信昵称</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.downNickName }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>下单方式</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ RESERVATION_PAY_TYPE_TEXT[detailData.paymentType] }}
                  </div>
                </div>
              </div>

              <div class="cell-item">
                <div class="col col-3">
                  <div>预约人</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.name }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>预约手机</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.phone }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>预约时间</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.time }}
                  </div>
                </div>
              </div>

              <div class="cell-item">
                <div class="col col-3">
                  <div>预约门店</div>
                </div>
                <div class="col col-5">
                  <div>
                    {{ detailData.shopName }}
                  </div>
                </div>
                <div class="col col-3">
                  <div>预约资源</div>
                </div>
                <div class="col col-13">
                  <div>
                    {{ detailData.categoryName }}
                  </div>
                </div>
              </div>

              <div class="cell-item">
                <div class="col col-3">
                  <div>顾客备注</div>
                </div>
                <div class="col col-21">
                  <div>
                    {{ detailData.customerRemark }}
                  </div>
                </div>
              </div>
              <div class="cell-item">
                <div class="col col-3">
                  <div>商家备注</div>
                </div>
                <div class="col col-21">
                  <div>
                    {{ detailData.remark }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 商品内容跟支付 -->
            <div class="more-info-container">
              <div>
                <el-card>
                  <AppMainSubTitle title="服务明细：" />
                  <el-table
                    :data="detailData.goodsVOList"
                    style="width: 100%"
                    size="small"
                    border
                  >
                    <el-table-column prop="title" width="160" label="商品">
                      <template slot-scope="scope">
                        <ul>
                          <li class="common-column-box">
                            <div class="cover-img">
                              <img
                                v-if="scope.row.coverImg"
                                :src="fileBaseUrl + scope.row.coverImg"
                                alt
                                srcset
                              >
                            </div>
                            <div class="goods-title app-line-two">
                              {{ scope.row.title }}
                            </div>
                          </li>
                        </ul>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="SKU"
                      width="120"
                      align="center"
                    >
                      <!-- 只存在一个商品 -->
                      <div style="text-align: center">
                        {{ detailData.goodAllSku || '默认' }}
                      </div>
                    </el-table-column>
                    <el-table-column
                      label="服务时长/分钟"
                      width="120"
                      align="center"
                    >
                      {{ detailData.appointmentTime }}
                    </el-table-column>
                    <el-table-column label="单价" width="110" align="center">
                      <template slot-scope="scope">
                        <ToLocaleStrings :money="detailData.categoryVOS[0].totalPrice / 100" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量" width="100" align="center">
                      <template slot-scope="scope">
                        ×{{ scope.row.num }}
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </div>
              <div>
                <el-card>
                  <AppMainSubTitle title="支付明细：" />
                  <ul class="price-container">
                    <li>
                      <span>商品金额(合计)</span>
                      <ToLocaleStrings :money="detailData.goodsTotalPrice / 100" />
                    </li>
                    <li v-if="detailData.orderVo.useDiscount">
                      <span v-if="detailData.orderVo.discountInfo">{{ detailData.orderVo.discountInfo }}</span>
                      <span v-if="detailData.orderVo.allDiscountFee" style="color:#f56c6c">
                        <el-tag v-if="sendBack" type="danger" size="small" style="margin-right:10px">不退回</el-tag>
                        &nbsp;&nbsp;
                        <ToLocaleStrings
                          :money="-detailData.orderVo.allDiscountFee / 100"
                          color="rgb(245, 108, 108)"
                        />
                      </span>
                    </li>
                    <li v-if="detailData.orderVo.usePointsDiscount || detailData.orderVo.useSupermemberPointsDiscount">
                      <span>{{ detailData.orderVo.pointsDiscountNum }}积分</span>
                      <span style="color:#f56c6c">
                        <el-tag v-if="sendBack" type="danger" size="small" style="margin-right:10px">已退回{{ detailData.orderVo.pointsDiscountNum
                        }}积分</el-tag>
                        &nbsp;&nbsp;
                        <ToLocaleStrings
                          :money="-detailData.orderVo.pointsDiscountFee / 100"
                          color="rgb(245, 108, 108)"
                        />
                      </span>
                    </li>
                    <li>
                      <span>订单{{ isPayment }}金额</span>
                      <div>
                        <el-tag
                          v-if="detailData.orderVo.paymentMethod"
                          size="small"
                          :type="paymentTagMap[detailData.orderVo.paymentMethod]"
                          style="margin-right:10px"
                        >{{
                          PAYMENT_METHOD[detailData.orderVo.paymentMethod] }}</el-tag>
                        <ToLocaleStrings :money="detailData.orderVo.payFee / 100" color="#ffb72f" />
                        <span v-if="sendBack && (detailData.orderVo.useDiscount||detailData.orderVo.usePointsDiscount)" style="color:rgb(245, 108, 108)">（已退回<ToLocaleStrings :money="detailData.orderVo.payFee / 100" color="rgb(245, 108, 108)" />）</span>
                      </div>
                    </li>
                  </ul>
                </el-card>
              </div>
            </div>
            <!-- 操作记录 -->
            <!-- <div>
                <el-card  class="refundList">
                  <div class="head">
                    <div class="left">
                      <div class="title">操作记录：</div>
                      <div class="refundAmt">
                        合计已退：{{  }}元
                      </div>
                      <div class="refundIngAmt">
                        退款中：{{  }}元
                      </div>
                    </div>
                  </div>
                  <el-table
                    ref="dataTreeList"
                    style="width: 100%"
                  >
                    <el-table-column type="expand">
                      <template slot-scope="scope">
                        <div class="expand">
                          <div class="expandLabel">
                            退款详情{{  1 }}
                          </div>
                          <div class="expandVal">
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="操作时间" />
                    <el-table-column prop="refundFee" label="新状态" />
                    <el-table-column prop="refundStatusZh" label="旧状态" />
                    <el-table-column prop="operatorName" label="备注" />
                  </el-table>
                </el-card>
            </div> -->
          </div>
          <!-- 组件 -->
          <DialogRemark ref="dialogRemark" />
          <DialogError ref="dialogError" />
          <DialogWriteOffOrder ref="dialogWriteOffOrder" />
          <DialogAmend ref="dialogAmend" />
          <DialogCancel ref="dialogCancel" />
        </div>
      </el-collapse-transition>

      <!-- 详情 -->
      <el-collapse-transition />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { orderDetail, putSealTicket } from '@/api/reservation.js'
import DialogRemark from './DialogRemark'
import DialogError from './DialogError'
import DialogWriteOffOrder from './DialogWriteOffOrder'
import DialogAmend from './DialogAmend'
import DialogCancel from './DialogCancel'
import {
  RESERVATION_ORDER_STATE_TEXT,
  RESERVATION_PAY_TYPE_TEXT,
  TAG_MAP,
  PAYMENT_METHOD,
  paymentTagMap
} from '@/views/wxaReservationModule/views/orderManage/constant'
export default {
  components: {
    DialogRemark,
    DialogError,
    DialogWriteOffOrder,
    DialogAmend,
    DialogCancel
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      loading: false,
      isShowRefundDetail: false,
      // 数据
      refundList: [],
      totalData: {},
      errorArr: [],
      detail: null,
      orderNo: '',
      statusOptions: RESERVATION_ORDER_STATE_TEXT,
      detailData: {
        orderVo: {}
      },
      // tag映射
      TAG_MAP,
      RESERVATION_PAY_TYPE_TEXT,
      PAYMENT_METHOD,
      paymentTagMap
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'paymentKeyOptions']),
    buttonStatus() {
      const { status } = this.detailData
      const num = [1, 3, 4, 5]
      return !(num.indexOf(status) > -1)
    },
    refundStatus() {
      const { status } = this.detailData
      const num = [1, 4, 5]
      return !(num.indexOf(status) > -1)
    },
    remarkMsg() {
      const { orderNo } = this.detailData
      return {
        orderNo,
        businessRemark: ''
      }
    },
    writeOffOrder() {
      const { orderNo, time, name, phone } = this.detailData
      return {
        orderNo,
        code: '',
        time,
        name,
        phone
      }
    },
    amend() {
      const { orderNo, time } = this.detailData
      return {
        orderNo,
        time
      }
    },
    cancelOrder() {
      const { orderNo, createTime, downName, orderVo: { payFee, memberName }, downPhone } = this.detailData
      return {
        orderNo,
        createTime,
        downName,
        payFee,
        memberName,
        downPhone
      }
    },
    isPayment() {
      let payKey = ''
      const arr = [1, 5]
      const { paymentType, status } = this.detailData
      paymentType === 1 && (payKey = '应付')
      paymentType === 2 && (payKey = arr.indexOf(status) > -1 ? '应付' : '实付')
      return payKey
    },
    sendBack() {
      let backKey = ''
      const arr = [4, 5]
      const { paymentType, status } = this.detailData
      paymentType === 1 && (backKey = false)
      paymentType === 2 && (backKey = arr.indexOf(status) > -1)
      return backKey
    }

  },
  methods: {
    /**
     * 弹框相关
     */
    open({ orderNo = '' }) {
      this.orderNo = orderNo
      this.fetchData()
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      console.log(this.$route)
      if (this.$route.query.from === 'cancelTable' && this.$route.query.orderNo) return window.close()
      this.isShowRefundDetail = false
      this.detail = null
      this.loading = false
      this.errorArr = []
      this.resolve && this.resolve()
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
      
    },

    hide() {
      this.resolve && this.resolve()
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
     * 数据组
     */
    // 获取
    async fetchData() {
      this.loading = true
      this.dialogVisible = true
      await this.getDetail()
      // await this.getError()
      // await this.getRefundList()
      this.loading = false
    },
    getRefundList() {
      return new Promise((resolve, reject) => {
        // 已取消展示退款记录
      })
    },
    // 获取详情
    getDetail() {
      return new Promise((resolve, reject) => {
        orderDetail({ orderNo: this.orderNo })
          .then((res) => {
            this.detailData = res.data
            console.log(res)
          })
          .catch((err) => {
            this.$message.error(err.msg)
            setTimeout(() => {
              this.dialogVisible = false
            }, 1000)
            reject(err)
          })
          .finally(() => {
            resolve()
          })
      })
    },

    // 获取异常
    getError() {
      return new Promise((resolve, reject) => {
      })
    },

    /**
     * 按钮组
     */
    // 打印
    print() {
      this.$print(this.$refs.wxaMallOrderDetail)
    },
    // 打印小票
    putSealTicket(orderNo) {
      putSealTicket({ orderNo })
        .then((res) => {
          if (res.code === 0) {
            this.$notify({
              title: '成功',
              message: '打印成功',
              type: 'success'
            })
          }
        })
    },
    // 备注
    openDialogRemark() {
      this.$refs.dialogRemark.open({ detail: this.remarkMsg }).then((res) => {
        this.fetchData()
      })
    },
    // 核销
    openWriteOffOrder() {
      this.$refs.dialogWriteOffOrder.open({ detail: this.writeOffOrder }).then((res) => {
        this.fetchData()
      })
    },
    // 修改预约
    openDialogAmend() {
      this.$refs.dialogAmend.open({ detail: this.amend }).then((res) => {
        this.fetchData()
      })
    },
    // 异常处理
    openDialogError() {
      this.$refs.dialogError
        .open({ detail: this.detail, errorArr: this.errorArr })
        .then((res) => {
          this.fetchData()
        })
    },
    // 订单取消
    openDialogCancel() {
      this.$refs.dialogCancel.open({ detail: this.cancelOrder }).then((res) => {
        this.fetchData()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 容器 */
.content-container {
  min-width: 1000px;
  max-width: 1300px;
  margin: 0 auto;
}

.order-info-container {
  margin-bottom: 20px;
}

.more-info-container {
  display: flex;

  > div {
    flex: 1;
    margin: 5px;
  }

  ::v-deep .el-card {
    margin-bottom: 10px;
  }
}

.expand {
  display: flex;
  .expandLabel {
    display: inline-block;
    width: 100px;
    font-weight: bold;
  }
  .expandVal {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .expandFormItem {
      width: 33%;
      display: flex;
      margin-bottom: 20px;
      .expandFormLabel {
        flex-shrink: 0;
      }
      .expandFormValue {
        flex: 1;
      }
    }
  }
}
/* 异常 */
.error-tips-container {
  margin: 10px 0;

  .error-content {
    margin-right: 10px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #409eff;
    border: 1px solid #d9ecff;
    border-radius: 4px;
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;

    li {
      margin-top: 5px;
    }
  }
}

/* 订单信息  */
.order-info-container {
  line-height: 24px;

  .cell-item {
    display: flex;
    border-left: 1px solid #e7e7e7;
    box-sizing: content-box;

    &:last-child {
      border-bottom: 1px solid #e7e7e7;
    }

    .col {
      display: flex;

      > div {
        flex: 1;
        padding: 10px;
        border-top: 1px solid #e7e7e7;
        border-right: 1px solid #e7e7e7;
      }

      &:nth-child(odd) {
        div {
          text-align: center;
        }
      }
    }

    .col-3 {
      flex: 3;
    }

    .col-5 {
      flex: 5;
    }

    .col-13 {
      flex: 13;
    }

    .col-21 {
      flex: 21;
    }
  }
}
.refundList {
  display: block;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      div {
        margin-right: 30px;
      }
      .title {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
/* 商品表格 */
.common-column-box {
  display: flex;
  align-items: center;
  padding: 10px 0;

  .cover-img {
    margin-right: 10px;
    flex: 0 0 50px;
    height: 50px;
    border: 1px solid #e7e7e7;
  }

  .goods-title {
    font-weight: bold;
    color: #000;
  }

  ::v-deep {
    th {
      text-align: left;
    }
  }
}

/* 预售条款 */
.pre-sell-tips-container {
  .title {
    margin: 10px 0;
    font-weight: bold;
  }

  .tips {
    margin: 6px 10px;
    flood-color: #606266;
    font-size: 14px;
  }
}

/* 价格管理 */
.price-container {
  width: 100%;
  li {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    &:span {
      display: block;
    }
    &:nth-last-child(2) {
      padding-bottom: 10px;
      border-bottom: 1px solid #e7e7e7;
    }
  }
}
</style>
